<template>
  <div class="title fz34">
    <div class="safe-area"></div>
    <van-icon
      class="icon"
      :style="{ color: color }"
      name="arrow-left"
      v-if="isBack"
      @click="back"
    />
    <div
      v-if="title"
      style="padding-bottom: 0.26rem; padding-top: 0.36rem"
      :style="{ color: color }"
    >
      {{ title }}
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getInfo } from "@/utils/auth";
const { proxy } = getCurrentInstance();
defineProps({
  title: { type: String, default: "" },
  isBack: { type: Boolean, default: false },
  color: { type: String, default: "#fff" },
});
const router = useRouter();
function back() {
  if (window.history.state.back) {
    //返回上级h5
    router.back(-1);
  } else {
    router.replace("/index");
  }
}
</script>


<style scoped>
.icon {
  position: absolute;
  left: 0.3rem;
  margin-top: 0.4rem;
}
.title {
  position: fixed;
  background-color: transparent;
  width: 100%;
  text-align: center;
  font-family: PingFang SC;
  font-weight: bold;
  z-index: 999;
  color: #fff;
}
.safe-area {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}
</style>
